<template>
	<NavHeader />

	<div class="top-wrap">
		<div class="flex-ac top-content">
			<div>
				<h1>APS</h1>
				<h1>高级排产系统</h1>
				<p class="desc">生产智能排程系统 – 车间生产的“导航仪”</p>
			</div>
			<img src="@/assets/img/aps/top-icon.png" class="top-icon">
		</div>

	</div>
	<div class="box-wrap">
		<img src="@/assets/img/aps/data-show.png" alt="" class="data-show">

		<FadeInSection animation="fade-up">
			<div>
				<h2>你可能会遇到的问题</h2>
				<div class="flex-jsc question-list">
					<div>
						<img src="@/assets/img/aps/question1.png" alt="" srcset="">
						<div class="title">人工排产效率低</div>
						<div class="desc">需要多人分工，用Excel方式做粗略排程计划，难以做到面面俱到。</div>
					</div>
					<div>
						<img src="@/assets/img/aps/question2.png" alt="" srcset="">
						<div class="title">产能浪费</div>
						<div class="desc">靠经验判断、设备利用率低，制造成本持续增加。</div>
					</div>
					<div>
						<img src="@/assets/img/aps/question3.png" alt="" srcset="">
						<div class="title">生产要素关联度低</div>
						<div class="desc">人工排产，往往无法考虑非常全面，导致生产计划不准确，进而影响生产效率和资源利用率。</div>
					</div>
					<div>
						<img src="@/assets/img/aps/question4.png" alt="" srcset="">
						<div class="title">无法满足客户需求</div>
						<div class="desc">无法确定交期，急单大单不敢接，无法紧急插单，客户满意度低。</div>
					</div>
				</div>
				<h2>在精智，这些问题都能够解决</h2>
				<div class="desc">
					通过人工智能算法，对生产排程进行优化，帮助工厂提升整体生产的竞争力。收集关于产品的设计规格、物料需求、生产流程、设备人员资源可用性等数据。确定影响生产排程的关键特征，如订单的复杂度、所需特种工艺、特定原材料供应情况、设备特殊要求等。提取与生产时间、成本和质量相关的特征进行学习，以此实现高效的资源分配和订单满足的同时，提高设备开工率、平衡人员与工作量、减少生产等待周期、降低生产成本。
				</div>
			</div>
		</FadeInSection>



		<h2>方案优势</h2>
		<FadeInSection animation="fade-up">
			<div class="solution flex-jsc">
				<div class="desc">
					<div>APS高级智能计划与排程系统算法</div>
					<h2 style="margin-top: 0;">AI赋能</h2>
					<div>强化学习/机器学习/深度学习</div>
					<div class="flex">
						<div>求解规模：</div>
						<div style="text-align: left;">
							<div>*14天+13周订单</div>
							<div>*亿级级别约束条件</div>
							<div>*500+ 产品</div>
						</div>
					</div>
				</div>
				<img src="@/assets/img/aps/ai-icon.png" alt="" class="ai-icon">
			</div>
		</FadeInSection>
		<h2>方案对比</h2>
		<FadeInSection animation="fade-up">
			<div class="flex-jsc">
				<img src="@/assets/img/aps/vs-img.png" alt="" class="vs-img">
				<div class="desc" style="width: 308px;text-align: right;">
					<div class="font18">AI加持下的排程场景区别</div>
					<h2 style="margin-top: 0;">传统模式VS算法加持</h2>
					<div class="font16">传统模式：人工排产/传统经验/单工序排程算法加持: 多工序多/生产模式/多工艺路线多目标综合考虑</div>
				</div>
			</div>
		</FadeInSection>
		<h2>方案提升</h2>
		<FadeInSection animation="fade-up">
			<div class="flex-jsc solution-icon-list">
				<img src="@/assets/img/aps/solution1.png" alt="" srcset="">
				<img src="@/assets/img/aps/solution2.png" alt="" srcset="">
				<img src="@/assets/img/aps/solution3.png" alt="" srcset="">

			</div>
		</FadeInSection>
	</div>

	<!-- 底部 -->
	<PageFoot />

</template>

<script setup>
import NavHeader from '@/components/NavHeader.vue';
import PageFoot from '@/components/PageFoot.vue';
import FadeInSection from '@/components/FadeInSection.vue';
import { ref } from 'vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const images = [
	new URL('@/assets/img/banner1.png', import.meta.url).href,
	new URL('@/assets/img/banner1.png', import.meta.url).href,
	new URL('@/assets/img/banner1.png', import.meta.url).href,

];

</script>

<style scoped lang="less">
.top-wrap {
	background: url("@/assets/img/aps/top-bg.png");
	width: 100%;
	height: 457px;
	background-position: 100% 100%;
	position: relative;

	.top-content {
		width: 62%;
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translateX(-50%);

		h1 {
			font-size: 37px;
			font-weight: bold;
		}

		.desc {
			font-size: 24px;
			margin-top: 22px;
		}

		.top-icon {
			width: 626px;
			height: 387px;
			// margin-left: 120px;
		}
	}
}

.box-wrap {
	text-align: center;
	font-weight: 400;
	width: 62%;
	margin: 0 auto;

	.data-show {
		width: 930px;
		height: 170px;
	}

	.question-list {
		margin-top: 50px;

		&>div {
			width: 187px;

			& img {
				width: 70px;
				height: 70px;
			}

			.title {
				font-size: 16px;
				font-weight: bold;
				line-height: 30px;
				margin-top: 15px;
			}

			.desc {
				font-size: 11px;
			}
		}

	}

	& h2 {
		font-size: 34px;
		color: #000;
		font-weight: bold;
		margin-top: 60px;
		line-height: 62px;
	}

	.ai-icon {
		width: 305px;
		height: 301px;
	}

	.vs-img {
		width: 526px;
		height: 302px;
	}

	.solution-icon-list {
		margin-top: 34px;
		margin-bottom: 175px;

		img {
			width: 280px;
			height: 164px;
		}
	}

	& p {
		font-size: 15px;
		color: rgba(88, 95, 109, 1);
		margin-top: 11px;
	}

	.font16 {
		font-size: 16px;
	}

	.font18 {
		font-size: 18px;
	}
}
</style>